<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<title>客户行为</title>
<link href="../favicon.ico" rel="shortcut icon"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/style.min.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/font-awesome.min93e3.css"/>
<link rel="stylesheet" type="text/css" href="<%=path%>/bc/css/clue.css"/>
<style type="text/css">
.news {
    float: right;
    width: 98px;
    height: 40px;
    line-height: 40px;
    background: #03a9f4;
    border: 1px solid #03a9f4;
    border-radius: 3px;
    color: #fff;
    text-align: center;
}
.ru {
    margin-left: 20px;
    background: #fff;
    color: #03a9f4;
}
</style>
</head>
<body class="gray-bg">
<div class="container-fluid">
	<div class="row">
		<div class="col-sm-1 col-sm-offset-11"><a class="chartsSH" href="javascript:void(0);">隐藏</a><a class="chartsSH" href="javascript:void(0);" style="display: none;">展开</a></div>
	</div>
	<!-- charts图表 -->
	<div class="row" id="charts">
		<div class="col-sm-2" id="c_warp1" style="height: 150px;"></div>
		<div class="col-sm-2" id="c_warp2" style="height: 150px;"></div>
		<div class="col-sm-2" id="c_warp3" style="height: 150px;"></div>
		<div class="col-sm-2" id="c_warp4" style="height: 150px;"></div>
		<div class="col-sm-2" id="c_warp5" style="height: 150px;"></div>
	</div>
	<br/>
	<!-- 搜索条件 -->
	<div class="row">
		<div class="col-sm-9">
			<label>关键字</label>&nbsp;<input id="nameOrphone" placeholder="输入姓名/邮箱/电话，支持模糊搜索" type="text" class="form-control" style="display: inline-block;width:260px;">
			&nbsp;&nbsp;
			<label>参与活动</label>
			<select id="activity" class="form-control" name="account" style="display: inline-block;width:160px;">
				<option value="">全部</option>
                <option value="1">已参加</option>
                <option value="2">未参加</option>
            </select>
       		&nbsp;&nbsp;
			<label>来源</label>
			<select id="source" class="form-control" name="account" style="display: inline-block;width:160px;">
				<option value="">全部</option>
            </select>
            &nbsp;&nbsp;
			<img id="search" src="<%=path%>/images/search.png" height="34px" style="margin-top: -4px;cursor: pointer;">
		</div>
		<div class="col-sm-3">
			<a href="javascript:;" class="news ru"><img src="<%=basePath%>/images/add_2.png">导入</a>
			<a href="javascript:;" class="news J_xnews"><img src="<%=basePath%>/images/add_1.png">新建</a>
		</div>
	</div>
	<br/>
	<!-- 筛选条件 -->
	<div class="row">
		<div class="col-sm-1"><a class="sort" href="javascript:void(0);">全部</a></div>
		<div class="col-sm-1"><a class="sort" href="javascript:void(0);">时间属性<img src="<%=path %>/images/sort_both.png"></a></div>
		<div class="col-sm-1"><a class="sort" href="javascript:void(0);">频率<img src="<%=path %>/images/sort_both.png"></a></div>
		<div class="col-sm-1"><a class="sort" href="javascript:void(0);">交易量<img src="<%=path %>/images/sort_both.png"></a></div>
		<div class="col-sm-1"><a class="sort" href="javascript:void(0);">流失客户</a></div>
		<div class="col-sm-1 col-sm-offset-6">客户维度定制</div>
	</div>
	&nbsp;
	<!-- 内容 -->
	<div class="row">
		<div class="col-sm-12">
			<table class="table table-hover" id="dataList">
				<thead>
					<tr>
						<th>姓名</th>
						<th>参与活动</th>
						<th>累计消费</th>
						<th>频率/时间属性</th>
						<th>第一次消费</th>
						<th>最近消费</th>
						<th>来源</th>
						<th>标签</th>
						<th style="width: 60px;">操作</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
			
			<div class="m_xpages">
                <div class="mian">
                    <span>显示个数</span>
                    <select><option>12</option><option>24</option><option>48</option></select>
                    <span>共80条</span>
                    <span>1/4页</span>
                    <a href="javascript:;" class="prev">上一页</a>
                    <a href="javascript:;" class="next">下一页</a>
                    <span>前往</span>
                    <input type="text" value="1" class="text">
                    <span>页</span>
                </div>
            </div>
		</div>
	</div>
</div>
</body>
<script type="text/javascript" src="<%=path%>/hplus/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/hplus/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/echarts.common.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/page.js"></script>
<script type="text/javascript">
var path = "<%=path%>";
var startIndex = 0;		//起始数
var pageSize = 12;		//每页大小
var nameOrphone = "";	//搜索关键字
var activity = "";		//是否参加活动
var source = "";		//搜索来源
var listIndex = 0;		//查询的列表
var orderby = "asc";		//排序

$(function(){
	init();
	
	$(".chartsSH").click(function(){
		if($(this).text() == "隐藏"){
			$("#charts").hide();
		}else{
			$("#charts").show();
		}
		$(this).hide().siblings().show();
	});
	
	$("#search").click(function(){
		nameOrphone = $.trim($("#nameOrphone").val());
		activity = $("#activity").val();
		source = $("#source").val();
		
		console.log(nameOrphone+"--"+activity+"--"+source);
		
		list();
	});
	
	$(".sort").click(function(){
		var index = $(this).parent().index();
		var src = $(this).find("img").attr("src");
		
		if(listIndex==index && src==null){
			return ;
		}
		
		listIndex = index;
		
		if(src != null){
			if(src.indexOf("sort_asc.png")>=0){
				orderby = "desc";
				$(this).find("img").attr("src", path+"/images/sort_desc.png");
				$(this).parent().siblings().find(".sort>img").attr("src", path+"/images/sort_both.png");
			}else{
				orderby = "asc";
				$(this).find("img").attr("src", path+"/images/sort_asc.png");
				$(this).parent().siblings().find(".sort>img").attr("src", path+"/images/sort_both.png");
			}
		}else{
			$(this).parent().siblings().find(".sort>img").attr("src", path+"/images/sort_both.png");
		}
		
		list();
	});
});

function init(){
	/*饼图开始*/
	$.post('<%=path%>/api/custome/getCustomerSourceChar', function(data) {
		data = JSON.parse(data);
		charPie('c_warp1','客户来源渠道',data);
	});
	
	$.post('<%=path%>/api/custome/getCustomerNewChar', function(data) {
		data = JSON.parse(data);
		charPie('c_warp2','时间属性',data);
	});
	
	$.post('<%=path%>/api/custome/getCustomerTotalConsumptionChar', function(data) {
		data = JSON.parse(data);
		charPie('c_warp3','交易频率',data);
	});
	
	$.post('<%=path%>/api/custome/getCustomerTradingVolumeChar', function(data) {
		data = JSON.parse(data);
		charPie('c_warp4', '交易量', data);
	});
	
	$.post('<%=path%>/api/custome/getCustomerLossCustromerChar', function(data) {
		data = JSON.parse(data);
		charPie('c_warp5','流失客户',data);
	});
	/*饼图结束*/
	
	getSourceList();
	
	list();
}

//获取来源下拉框数据
function getSourceList() {
	$.post(path+'/api/customeSource/getCustomerSourceList',function(data) {
		data = JSON.parse(data);
		var option = '<option value="">全部</option>';
		$.each(data.customerSourceList, function(n, value) {
			option += '<option value="'+ value.id+'">'+value.name+'</option>';
		});
		$("#source").html(option);
	});
}

function charPie(id, text, data) {
	var myChart = echarts.init(document.getElementById(id));
	option = {
		title : {
			subtext : text,
			x : 50,
			y : 100
		},
		tooltip : {
			trigger : 'item',
			formatter : "{a} <br/>{b}: {c} ({d}%)"
		},
		legend : {
			orient : 'vertical',
			x : 'right',
			data : data.xdata
		},
		series : [ {
			name : text,
			type : 'pie',
			radius : [ '50%', '70%' ],
			center : [ '35%', '50%' ],
			avoidLabelOverlap : false,
			label : {
				normal : {
					show : false,
					position : 'center'
				},
				emphasis : {
					show : true,
					textStyle : {
						fontSize : '18',
						fontWeight : 'bold'
					}
				}
			},
			labelLine : {
				normal : {
					show : false
				}
			},
			data : data.ydata
		} ],
		color : [ '#60db4c', '#ffc006', '#03A9F4' ]
	};
	myChart.setOption(option);
}

function list(){
	if(listIndex == 0){	//全部
		customerList();
	}else if(listIndex == 1){	//时间属性
		totalDay();
	}else if(listIndex == 2){	//频率
		totalConsumption();
	}else if(listIndex == 3){	//交易量
		tradingVolume();
	}else if(listIndex == 4){	//流失客户
		tradingVolume();
	}
}

//全部
function customerList(){
	$.post(path+'/api/custome/customerDetailList', {
   		"nameOrphone": nameOrphone,
		"activity" : activity,
		"source" : source,
		"startIndex" : startIndex,
		"pagesize" : pageSize
	}, function(data) {
		data = JSON.parse(data);
		var tr = dealList(data.customerList);
		$("#dataList tbody").html(tr);
		page(data.totalCount);
	});
}

//时间属性
function totalDay() {
	$.post(path+'/api/custome/getTotalDay', {
		"nameOrphone": nameOrphone,
		"activity" : activity,
		"source" : source,
		'orderby' : orderby,
		"startIndex" : startIndex,
		"pagesize" : pageSize
	}, function(data) {
		data = JSON.parse(data);
		var tr = dealList(data.customerList);
		$("#dataList tbody").html(tr);
		page(data.totalCount);
	});
}

//频率
function totalConsumption() {
	$.post(path+'/api/custome/getTotalConsumption', {
		"nameOrphone": nameOrphone,
		"activity" : activity,
		"source" : source,
		'orderby' : orderby,
		"startIndex" : startIndex,
		"pagesize" : pageSize
	}, function(data) {
		data = JSON.parse(data);
		var tr = dealList(data.customerList);
		$("#dataList tbody").html(tr);
		page(data.totalCount);
	});
}

//交易量
function tradingVolume() {
	$.post(path+'/api/custome/getTradingVolume', {
		"nameOrphone": nameOrphone,
		"activity" : activity,
		"source" : source,
		'orderby' : orderby,
		"startIndex" : startIndex,
		"pagesize" : pageSize
	}, function(data) {
		data = JSON.parse(data);
		var tr = dealList(data.customerList);
		$("#dataList tbody").html(tr);
		page(data.totalCount);
	});
}

//流失客户
function lossCustromer(pagei, pagesize) {
	getRigehtLossCustromer();
	$.post(path+'/api/custome/getLossCustromer', {
		"nameOrphone": nameOrphone,
		"activity" : activity,
		"source" : source,
		"startIndex" : startIndex,
		"pagesize" : pageSize
	}, function(data) {
		data = JSON.parse(data);
		var tr = dealList(data.customerList);
		$("#dataList tbody").html(tr);
		page(data.totalCount);
	});
}

//处理数据列表
function dealList(list){
	var tr = "";
	$.each(list,function(i,a){
		tr += '<tr>';
		tr += '<td><a customerId="'+a.id+'" href="'+path+'/api/custome/customerInfo?customerID='+a.id+'">'+a.name+'</a></td>';
		tr += '<td>'+(a.activity_name == null ? '暂无参加活动': a.activity_name)+'</td>';
		tr += '<td>'+(a.money_total == null ? 0: a.money_total)+'</td>';
		tr += '<td>'+(a.totalConsumption == null ? 0: a.totalConsumption)+'次/'+(a.totalDay == -1 ? "无消费记录": a.totalDay+"天")+'</td>';
		tr += '<td>'+(a.first_write_off_time == null ? '暂无消费记录': a.first_write_off_time)+'/'+(a.first_consumption_amount == null ? "0": a.first_consumption_amount)+'</td>';
		tr += '<td>'+(a.lately_write_off_time == null ? '暂无消费记录': a.lately_write_off_time)+'/'+(a.lately_consumption_amount == null ? "0": a.lately_consumption_amount)+'</td>';
		tr += '<td>'+(a.customer_source == null ? "未知": a.customer_source)+'</td>';
		tr += '<td>';	//这行是标签
		if (a.newOrOldCustomer == 2) {
			tr += '<img src="'+path+'/images/host_6.png" />';
		} else if (a.newOrOldCustomer == 3) {
			tr += '<img src="'+path+'/images/host_3.png" />';
		}
		if (a.transactionFrequency == 2) {
			tr += '<img src="'+path+'/images/host_2.png" />';
		} else if (a.transactionFrequency == 3) {
			tr += '<img src="'+path+'/images/host_7.png" />';
		} else if (a.transactionFrequency == 4) {
			tr += '<img src="'+path+'/images/host_5.png" />';
		}
		if (a.transactionLimit == 2) {
			tr += '<img src="'+path+'/images/host_1.png" />';
		} else if (a.transactionLimit == 3) {
			tr += '<img src="'+path+'/images/host_8.png" />';
		} else if (a.transactionLimit == 4) {
			tr += '<img src="'+path+'/images/host_9.png" />';
		}
		tr += '</td>';
		tr += '<td>';
		tr += '<a class="xiaoTuBiao xtb_dialog"></a>';
		tr += '<a class="xiaoTuBiao xtb_del"></a>';
		tr += '</td>';
		tr += '</tr>';
	});
	return tr;
}
</script>
</html>